---
layout: layout.njk
permalink: "{{ page.filePathStem }}.html"
title: Smile - Declarative Data Visualization
---
{% include "toc.njk" %}

<div class="col-md-9 col-md-pull-3">

    <h1 id="visualization-top" class="title">Declarative Data Visualization</h1>

    <p>In previous section, we show how to visualize data in imperative way.
       Smile also support data visualization in declarative approach.
       With <code>smile.plot.vega</code> package, we can create a specification
       that describes visualizations as mappings from data to properties
       of graphical marks (e.g., points or bars). The specification is
       based on <a href="https://vega.github.io/vega-lite/">Vega-Lite</a>.
       The Vega-Lite compiler automatically produces visualization components
       including axes, legends, and scales. It then determines properties of
       these components based on a set of carefully designed rules.</p>
       
    <p>This approach allows specifications to be succinct and expressive,
        but also provide user control. As Vega-Lite is designed for analysis,
        it supports data transformations such as aggregation, binning,
        filtering, sorting, and visual transformations including stacking
        and faceting. Moreover, Vega-Lite specifications can be composed
        into layered and multi-view displays, and made interactive with
        selections.</p>

    <p>Vega-Lite website provides detailed
        <a href="https://vega.github.io/vega-lite/docs/">documentation</a>
        on the specification. In the below, we will show how to create
        a variety of charts through examples.</p>

    <h2 id="bar" class="title">Bar Charts</h2>

    <h3 id="simple_bar" class="title">Simple Bar Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_1" data-toggle="tab">Java</a></li>
        <li><a href="#scala_1" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_1">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Simple Bar Plot")
        .description("A simple bar chart with embedded data.")
        .widthStep(30);

bar.data().values("""
        [
          {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
          {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
          {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
        ]""");

bar.mark("bar");
Field x = bar.encode("x", "a").type("ordinal");
x.axis().labelAngle(0);
bar.encode("y", "b").type("quantitative");
bar.show();
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_1">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val bar = VegaLite.view().
  mark("bar").
  heightStep(17).
  x(field = "a", `type` = "ordinal", axis = JsObject("labelAngel" -> JsInt(0))).
  y(field = "b", `type` = "quantitative").
  data(jsan"""
      [
        {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
        {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
        {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
      ]"""
  ).
  description("A simple bar chart with embedded data.")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_1"></div>
    <script type="text/javascript">
      var spec = {
        "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  }
      };
      vegaEmbed('#vis_1', spec);
    </script>

    <h3 id="aggregate_bar" class="title">Aggregate Bar Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_2" data-toggle="tab">Java</a></li>
        <li><a href="#scala_2" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_2">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Aggregate Bar Plot")
        .description("A bar chart showing the US population distribution of age groups in 2000.")
        .heightStep(20);

bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform().filter("datum.year == 2000");
bar.encode("x", "people").type("quantitative").aggregate("sum").title("population");
bar.encode("y", "age").type("ordinal");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_2">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val aggregateBar = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark("bar").
  heightStep(17).
  x(field = "people", `type` = "quantitative", aggregate = "sum", title = "population").
  y(field = "age", `type` = "ordinal").
  transform(json"""{"filter": "datum.year == 2000"}""").
  description("A bar chart showing the US population distribution of age groups in 2000.")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_2"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart showing the US population distribution of age groups in 2000.",
  "height": {"step": 17},
  "data": { "url": "https://vega.github.io/vega-lite/examples/data/population.json"},
  "transform": [{"filter": "datum.year == 2000"}],
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "age", "type": "ordinal"
    },
    "x": {
      "aggregate": "sum", "field": "people", "type": "quantitative",
      "axis": {"title": "population"}
    }
  }
};
      vegaEmbed('#vis_2', spec);
    </script>

    <h3 id="sorted_aggregate_bar" class="title">Aggregate Bar Chart (Sorted)</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_3" data-toggle="tab">Java</a></li>
        <li><a href="#scala_3" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_3">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Sorted Aggregate Bar Plot")
        .description("A bar chart that sorts the y-values by the x-values.")
        .heightStep(20);

bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform().filter("datum.year == 2000");
bar.encode("x", "people").type("quantitative").aggregate("sum").title("population");
bar.encode("y", "age").type("ordinal").sort("-x");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_3">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val sortedAggregateBar = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark("bar").
  heightStep(17).
  x(field = "people", `type` = "quantitative", aggregate = "sum", title = "population").
  y(field = "age", `type` = "ordinal", sort = Some("-x")).
  transform(json"""{"filter": "datum.year == 2000"}""").
  description("A bar chart that sorts the y-values by the x-values.")

show(sortedAggregateBar)
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_3"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart that sorts the y-values by the x-values.",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/population.json"},
  "transform": [{"filter": "datum.year == 2000"}],
  "height": {"step": 17},
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "age",
      "type": "ordinal",
      "sort": "-x"
    },
    "x": {
      "aggregate": "sum",
      "field": "people",
      "type": "quantitative",
      "axis": {"title": "population"}
    }
  }
};
      vegaEmbed('#vis_3', spec);
    </script>

    <h3 id="grouped_bar" class="title">Grouped Bar Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_4" data-toggle="tab">Java</a></li>
        <li><a href="#scala_4" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_4">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Group Bar Plot").widthStep(12);

bar.mark("bar");
bar.viewConfig().stroke("transparent").axis().domainWidth(1);
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform()
        .filter("datum.year == 2000")
        .calculate("datum.sex == 2 ? 'Female' : 'Male'", "gender");

bar.encode("x", "gender").type("nominal").title(null);
bar.encode("y", "people").type("quantitative").aggregate("sum").axis().title("population").grid(false);
bar.encode("color", "gender").type("nominal").range("#675193", "#ca8861");
bar.encode("column", "age").type("ordinal").spacing(10);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_4">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val groupedBar = VegaLite.facet("https://vega.github.io/vega-lite/examples/data/population.json").
  column(field = "age", `type` = "ordinal", spacing = Some(10)).
  mark("bar").
  widthStep(12).
  x(field = "gender", `type` = "nominal", title = null).
  y(field = "people", `type` = "quantitative", aggregate = "sum", axis = json"""{"title": "population", "grid": false}""").
  color(field = "gender", `type` = "nominal", scale = json"""{"range": ["#675193", "#ca8861"]}""").
  transform(
      json"""{"filter": "datum.year == 2000"}""",
      json"""{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}"""
  ).
  config(json"""{"view": {"stroke": "transparent"}, "axis": {"domainWidth": 1}}""")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_4"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "url": "https://vega.github.io/vega-lite/examples/data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "width": {"step": 12},
  "mark": "bar",
  "encoding": {
    "column": {
      "field": "age", "type": "ordinal", "spacing": 10
    },
    "y": {
      "aggregate": "sum", "field": "people", "type": "quantitative",
      "axis": {"title": "population", "grid": false}
    },
    "x": {
      "field": "gender", "type": "nominal",
      "axis": {"title": ""}
    },
    "color": {
      "field": "gender", "type": "nominal",
      "scale": {"range": ["#675193", "#ca8861"]}
    }
  },
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {"domainWidth": 1}
  }
};
      vegaEmbed('#vis_4', spec);
    </script>

    <h3 id="stacked_bar" class="title">Stacked Bar Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_5" data-toggle="tab">Java</a></li>
        <li><a href="#scala_5" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_5">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Stacked Bar Plot");
bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv");
bar.encode("x", "date").type("ordinal").timeUnit("month").title("Month of the year");
bar.encode("y", null).type("quantitative").aggregate("count");
bar.encode("color", "weather").type("nominal")
        .domain("sun", "fog", "drizzle", "rain", "snow")
        .range("#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd")
        .legend().title("Weather type");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_5">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val stackedBar = VegaLite("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv").
  mark("bar").
  x(field = "date", `type` = "ordinal", timeUnit = "month", title = "Month of the year").
  y(field = null, aggregate = "count", `type` = "quantitative").
  color(field = "weather", `type` = "nominal",
      scale = json"""{
        "domain": ["sun", "fog", "drizzle", "rain", "snow"],
        "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
      }""",
      legend = JsObject("title" -> JsString("Weather type"))
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_5"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"},
  "mark": "bar",
  "encoding": {
    "x": {
      "timeUnit": "month",
      "field": "date",
      "type": "ordinal",
      "axis": {"title": "Month of the year"}
    },
    "y": {
      "aggregate": "count",
      "type": "quantitative"
    },
    "color": {
      "field": "weather",
      "type": "nominal",
      "scale": {
        "domain": ["sun", "fog", "drizzle", "rain", "snow"],
        "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
      },
      "legend": {"title": "Weather type"}
    }
  }
};
      vegaEmbed('#vis_5', spec);
    </script>

    <h3 id="stacked_round_bar" class="title">Stacked Bar Chart with Rounded Corners</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_6" data-toggle="tab">Java</a></li>
        <li><a href="#scala_6" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_6">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Stacked Bar with Rounded Corner");
bar.mark("bar").cornerRadiusTopLeft(3).cornerRadiusTopRight(3);
bar.data().url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv");
bar.encode("x", "date").type("ordinal").timeUnit("month").title("Month of the year");
bar.encode("y", null).type("quantitative").aggregate("count");
bar.encode("color", "weather").type("nominal");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_6">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val stackedRoundedBar = VegaLite("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv").
  mark(JsObject("type" -> "bar", "cornerRadiusTopLeft" -> 3, "cornerRadiusTopRight" -> 3)).
  x(field = "date", `type` = "ordinal", timeUnit = "month").
  y(field = null, aggregate = "count", `type` = "quantitative").
  color(field = "weather", `type` = "nominal")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_6"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"},
  "mark": {"type": "bar", "cornerRadiusTopLeft": 3, "cornerRadiusTopRight": 3},
  "encoding": {
    "x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
    "y": {"aggregate": "count", "type": "quantitative"},
    "color": {"field": "weather", "type": "nominal"}
  }
};
      vegaEmbed('#vis_6', spec);
    </script>

    <h3 id="horizontal_stacked_bar" class="title">Horizontal Stacked Bar Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_7" data-toggle="tab">Java</a></li>
        <li><a href="#scala_7" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_7">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Horizontal Stacked Bar");
bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/barley.json");
bar.encode("x", "yield").type("quantitative").aggregate("sum");
bar.encode("y", "variety").type("nominal");
bar.encode("color", "site").type("nominal");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_7">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val horizontalStackedBar = VegaLite("https://vega.github.io/vega-lite/examples/data/barley.json").
  mark("bar").
  x(field = "yield", `type` = "quantitative", aggregate = "sum").
  y(field = "variety", `type` = "nominal").
  color(field = "site", `type` = "nominal")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_7"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/barley.json"},
  "mark": "bar",
  "encoding": {
    "x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
    "y": {"field": "variety", "type": "nominal"},
    "color": {"field": "site", "type": "nominal"}
  }
};
      vegaEmbed('#vis_7', spec);
    </script>

    <h3 id="layered_bar" class="title">Layered Bar Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_8" data-toggle="tab">Java</a></li>
        <li><a href="#scala_8" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_8">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Layered Bar").widthStep(17);

bar.mark("bar");
bar.background().opacity(0.7);
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform()
        .filter("datum.year == 2000")
        .calculate("datum.sex == 2 ? 'Female' : 'Male'", "gender");

bar.encode("x", "age").type("ordinal");
bar.encode("y", "people").type("quantitative").aggregate("sum").title("population").stack(null);
bar.encode("color", "gender").type("nominal").range("#675193", "#ca8861");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_8">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val layeredBar = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark("bar").
  widthStep(17).
  x(field = "age", `type` = "ordinal").
  y(field = "people", `type` = "quantitative", aggregate = "sum", title = "population", stack = JsNull).
  color(field = "gender", `type` = "nominal", scale = json"""{"range": ["#675193", "#ca8861"]}""").
  opacity(0.7).
  transform(
      json"""{"filter": "datum.year == 2000"}""",
      json"""{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_8"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart showing the US population distribution of age groups and gender in 2000.",
  "data": { "url": "https://vega.github.io/vega-lite/examples/data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "width": {"step": 17},
  "mark": "bar",
  "encoding": {
    "x": {"field": "age", "type": "ordinal"},
    "y": {
      "aggregate": "sum", "field": "people", "type": "quantitative",
      "axis": {"title": "population"},
      "stack": null
    },
    "color": {
      "field": "gender", "type": "nominal",
      "scale": {"range": ["#675193", "#ca8861"]}
    },
    "opacity": {"value": 0.7}
  }
};
      vegaEmbed('#vis_8', spec);
    </script>

    <h3 id="normalized_stacked_bar" class="title">Normalized (Percentage) Stacked Bar Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_9" data-toggle="tab">Java</a></li>
        <li><a href="#scala_9" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_9">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Normalized (Percentage) Stacked Bar").widthStep(17);

bar.mark("bar");
bar.background().opacity(0.7);
bar.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
bar.transform()
        .filter("datum.year == 2000")
        .calculate("datum.sex == 2 ? 'Female' : 'Male'", "gender");

bar.encode("x", "age").type("ordinal");
bar.encode("y", "people").type("quantitative").aggregate("sum").title("population").stack("normalize");
bar.encode("color", "gender").type("nominal").range("#675193", "#ca8861");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_9">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val normalizedStackedBar = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark("bar").
  widthStep(17).
  x(field = "age", `type` = "ordinal").
  y(field = "people", `type` = "quantitative", aggregate = "sum", title = "population", stack = "normalize").
  color(field = "gender", `type` = "nominal", scale = json"""{"range": ["#675193", "#ca8861"]}""").
  transform(
      json"""{"filter": "datum.year == 2000"}""",
      json"""{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_9"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "url": "https://vega.github.io/vega-lite/examples/data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "mark": "bar",
  "width": {"step": 17},
  "encoding": {
    "y": {
      "aggregate": "sum", "field": "people", "type": "quantitative",
      "axis": {"title": "population"},
      "stack":  "normalize"
    },
    "x": {"field": "age", "type": "ordinal"},
    "color": {
      "field": "gender", "type": "nominal",
      "scale": {"range": ["#675193", "#ca8861"]}
    }
  }
};
      vegaEmbed('#vis_9', spec);
    </script>

    <h3 id="gantt_chart" class="title">Gantt Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_10" data-toggle="tab">Java</a></li>
        <li><a href="#scala_10" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_10">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var gantt = new View("Gantt Chart");
gantt.data().values("""
        [
          {"task": "A", "start": 1, "end": 3},
          {"task": "B", "start": 3, "end": 8},
          {"task": "C", "start": 8, "end": 10}
        ]""");

gantt.mark("bar");
gantt.encode("x", "start").type("quantitative");
gantt.encode("x2", "end").type("quantitative");
gantt.encode("y", "task").type("ordinal");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_10">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val gantt = VegaLite.view().
  mark("bar").
  y(field = "task", `type` = "ordinal").
  x(field = "start", `type` = "quantitative").
  x2(field = "end").
  data(jsan"""
      [
        {"task": "A", "start": 1, "end": 3},
        {"task": "B", "start": 3, "end": 8},
        {"task": "C", "start": 8, "end": 10}
      ]"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_10"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with ranged data (aka Gantt Chart).",
  "data": {
    "values": [
      {"task": "A", "start": 1, "end": 3},
      {"task": "B", "start": 3, "end": 8},
      {"task": "C", "start": 8, "end": 10}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {"field": "task", "type": "ordinal"},
    "x": {"field": "start", "type": "quantitative"},
    "x2": {"field": "end"}
  }
};
      vegaEmbed('#vis_10', spec);
    </script>

    <h3 id="color_bar" class="title">A Bar Chart Encoding Color Names in the Data</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_11" data-toggle="tab">Java</a></li>
        <li><a href="#scala_11" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_11">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Bar Chart Encoding Color Names in the Data");
bar.data().values("""
        [
          {"color": "red", "b": 28},
          {"color": "green", "b": 55},
          {"color": "blue", "b": 43}
        ]""");

bar.mark("bar");
bar.encode("x", "color").type("nominal");
bar.encode("y", "b").type("quantitative");
bar.encode("color", "color").type("nominal").scale(null);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_11">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val colorBar = VegaLite.view().
  mark("bar").
  x(field = "color", `type` = "nominal").
  y(field = "b", `type` = "quantitative").
  color(field = "color", `type` = "nominal", scale = JsNull).
  data(jsan"""
      [
        {"color": "red", "b": 28},
        {"color": "green", "b": 55},
        {"color": "blue", "b": 43}
      ]"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_11"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart that directly encodes color names in the data.",
  "data": {
    "values": [
      {
        "color": "red",
        "b": 28
      },
      {
        "color": "green",
        "b": 55
      },
      {
        "color": "blue",
        "b": 43
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "color",
      "type": "nominal"
    },
    "y": {
      "field": "b",
      "type": "quantitative"
    },
    "color": {
      "field": "color",
      "type": "nominal",
      "scale": null
    }
  }
};
      vegaEmbed('#vis_11', spec);
    </script>

    <h2 id="histogram_density" class="title">Histograms and Density Plots</h2>

    <h3 id="histogram" class="title">Histogram</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_12" data-toggle="tab">Java</a></li>
        <li><a href="#scala_12" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_12">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Histogram");
bar.mark("bar");
bar.data().url("https://vega.github.io/vega-lite/examples/data/movies.json");
bar.encode("x", "IMDB Rating").type("quantitative").bin(true);
bar.encode("y", null).type("quantitative").aggregate("count");
bar.encode("color", "gender").type("nominal").range("#675193", "#ca8861");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_12">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val histogram = VegaLite("https://vega.github.io/vega-lite/examples/data/movies.json").
  mark("bar").
  x(field = "IMDB Rating", `type` = "quantitative", bin = Left(true)).
  y(field = null, `type` = "quantitative", aggregate = "count")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_12"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/movies.json"},
  "mark": "bar",
  "encoding": {
    "x": {
      "bin": true,
      "field": "IMDB Rating",
      "type": "quantitative"
    },
    "y": {
      "aggregate": "count",
      "type": "quantitative"
    }
  }
};
      vegaEmbed('#vis_12', spec);
    </script>

    <h3 id="relative_frequency_histogram" class="title">Relative Frequency Histogram</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_13" data-toggle="tab">Java</a></li>
        <li><a href="#scala_13" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_13">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Relative Frequency Histogram");

bar.mark("bar").tooltip(true);
bar.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
bar.encode("x", "bin_Horsepwoer").type("quantitative").bin("binned").title("Horsepower");
bar.encode("x2", "bin_Horsepwoer_end").type("quantitative");
bar.encode("y", "PercentOfTotal").type("quantitative").title("Relative Frequency").axis().format(".1~%");

bar.transform()
        .bin("Horsepower", "bin_Horsepwoer")
        .aggregate("count", null, "Count", "bin_Horsepwoer", "bin_Horsepwoer_end")
        .joinAggregate("sum", "Count", "TotalCount")
        .calculate("datum.Count/datum.TotalCount", "PercentOfTotal");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_13">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val freqHistogram = VegaLite("https://vega.github.io/vega-lite/examples/data/cars.json").
  mark(JsObject("type" -> "bar", "tooltip" -> true)).
  x(field = "bin_Horsepwoer", `type` = "quantitative", bin = Right(json"""{"binned":true}"""), title = "Horsepower").
  x2(field = "bin_Horsepwoer_end").
  y(field = "PercentOfTotal", `type` = "quantitative", title = "Relative Frequency", axis = json"""{"format": ".1~%"}""").
  transform(jsan"""[
      {
        "bin": true, "field": "Horsepower", "as": "bin_Horsepwoer"
      },
      {
        "aggregate": [{"op": "count", "as": "Count"}],
        "groupby": ["bin_Horsepwoer", "bin_Horsepwoer_end"]
      },
      {
        "joinaggregate": [{"op": "sum", "field": "Count", "as": "TotalCount"}]
      },
      {
        "calculate": "datum.Count/datum.TotalCount", "as": "PercentOfTotal"
      }
    ]"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_13"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Relative frequency histogram. The data is binned with first transform. The number of values per bin and the total number are calculated in the second and third transform to calculate the relative frequency in the last transformation step.",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/cars.json"},
  "transform": [{
      "bin": true, "field": "Horsepower", "as": "bin_Horsepwoer"
    }, {
      "aggregate": [{"op": "count", "as": "Count"}],
      "groupby": ["bin_Horsepwoer", "bin_Horsepwoer_end"]
    }, {
      "joinaggregate": [{"op": "sum", "field": "Count", "as": "TotalCount"}]
    }, {
      "calculate": "datum.Count/datum.TotalCount", "as": "PercentOfTotal"
    }
  ],
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {
      "title": "Horsepower",
      "field": "bin_Horsepwoer",
      "type": "quantitative",
      "bin": {"binned": true}
    },
    "x2": {"field": "bin_Horsepwoer_end"},
    "y": {
      "title": "Relative Frequency",
      "field": "PercentOfTotal",
      "type": "quantitative",
      "axis": {
        "format": ".1~%"
        }
    }
  }
};
      vegaEmbed('#vis_13', spec);
    </script>

    <h3 id="2d_histogram_heatmap" class="title">2D Histogram Heatmap</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_14" data-toggle="tab">Java</a></li>
        <li><a href="#scala_14" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_14">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("2D Histogram Heatmap").width(300).height(200);
bar.mark("rect");
bar.viewConfig().stroke("transparent");
bar.data().url("https://vega.github.io/vega-lite/examples/data/movies.json");
bar.encode("x", "IMDB Rating").type("quantitative").title("IMDB Rating").bin(new BinParams().maxBins(60));
bar.encode("y", "Rotten Tomatoes Rating").type("quantitative").bin(new BinParams().maxBins(40));
bar.encode("color", null).type("quantitative").aggregate("count");
bar.transform().filter(and(valid("IMDB Rating"), valid("Rotten Tomatoes Rating")));
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_14">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val histHeatmap = VegaLite("https://vega.github.io/vega-lite/examples/data/movies.json").
  mark("rect").
  x(field = "IMDB Rating", `type` = "quantitative", bin = Right(json"""{"maxbins":60}"""), title = "IMDB Rating").
  y(field = "Rotten Tomatoes Rating", `type` = "quantitative", bin = Right(json"""{"maxbins":40}""")).
  color(field = null, `type` = "quantitative", aggregate = "count").
  width(300).
  height(200).
  transform(json"""{
    "filter": {
      "and": [
        {"field": "IMDB Rating", "valid": true},
        {"field": "Rotten Tomatoes Rating", "valid": true}
      ]}}"""
  ).
  config(JsObject("view" -> json"""{"stroke": "transparent"}"""))
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_14"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/movies.json"},
  "transform": [{
    "filter": {"and": [
      {"field": "IMDB Rating", "valid": true},
      {"field": "Rotten Tomatoes Rating", "valid": true}
    ]}
  }],
  "mark": "rect",
  "width": 300,
  "height": 200,
  "encoding": {
    "x": {
      "bin": {"maxbins":60},
      "field": "IMDB Rating",
      "type": "quantitative"
    },
    "y": {
      "bin": {"maxbins": 40},
      "field": "Rotten Tomatoes Rating",
      "type": "quantitative"
    },
    "color": {
      "aggregate": "count",
      "type": "quantitative"
    }
  },
  "config": {
    "view": {
      "stroke": "transparent"
    }
  }
};
      vegaEmbed('#vis_14', spec);
    </script>

    <h3 id="density_plot" class="title">Density Plot</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_15" data-toggle="tab">Java</a></li>
        <li><a href="#scala_15" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_15">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var plot = new View("Density Plot").width(400).height(100);
plot.mark("area");
plot.data().url("https://vega.github.io/vega-lite/examples/data/movies.json");
plot.encode("x", "value").type("quantitative").title("IMDB Rating");
plot.encode("y", "density").type("quantitative");
plot.transform().density("IMDB Rating").bandwidth(0.3);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_15">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val density = VegaLite("https://vega.github.io/vega-lite/examples/data/movies.json").
  mark("area").
  x(field = "value", `type` = "quantitative", title = "IMDB Rating").
  y(field = "density", `type` = "quantitative").
  width(400).
  height(100).
  transform(json"""
    {
      "density": "IMDB Rating",
      "bandwidth": 0.3
    }"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_15"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/movies.json"},
  "width": 400,
  "height": 100,
  "transform":[
    {
      "density": "IMDB Rating",
      "bandwidth": 0.3
    }
  ],
  "mark": "area",
  "encoding": {
    "x": {
      "field": "value",
      "title": "IMDB Rating",
      "type": "quantitative"
    },
    "y": {
      "field": "density",
      "type": "quantitative"
    }
  }
};
      vegaEmbed('#vis_15', spec);
    </script>

    <h3 id="cumulative_frequency_distribution" class="title">Cumulative Frequency Distribution</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_16" data-toggle="tab">Java</a></li>
        <li><a href="#scala_16" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_16">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var plot = new View("Cumulative Frequency Distribution");
plot.mark("area");
plot.data().url("https://vega.github.io/vega-lite/examples/data/movies.json");
plot.encode("x", "IMDB Rating").type("quantitative");
plot.encode("y", "Cumulative Count").type("quantitative");
plot.transform().aggregate("count", "*", "count", "IMDB Rating")
    .window(new WindowTransformField("sum", "count", 0, "Cumulative Count"))
    .sort("IMDB Rating").frame(null, 0);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_16">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val cdf = VegaLite("https://vega.github.io/vega-lite/examples/data/movies.json").
  mark("area").
  x(field = "IMDB Rating", `type` = "quantitative").
  y(field = "cumulative_count", `type` = "quantitative").
  transform(json"""
    {
      "sort": [{"field": "IMDB Rating"}],
      "window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
      "frame": [null, 0]
    }"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_16"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/movies.json"},
  "transform": [{
    "aggregate":[{"op": "count", "field": "*", "as": "count"}],
    "groupby": ["IMDB Rating"]
  },
  {
    "sort": [{"field": "IMDB Rating"}],
    "window": [{"op": "sum", "field": "count", "as": "Cumulative Count"}],
    "frame": [null, 0]
  }],
  "mark": "area",
  "encoding": {
    "x": {
      "field": "IMDB Rating",
      "type": "quantitative"
    },
    "y": {
      "field": "Cumulative Count",
      "type": "quantitative"
    }
  }
};
      vegaEmbed('#vis_16', spec);
    </script>

    <h2 id="scatterplots" class="title">Scatterplots</h2>

    <h3 id="scatterplot" class="title">Scatterplot</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_17" data-toggle="tab">Java</a></li>
        <li><a href="#scala_17" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_17">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Scatter Plot");
bar.mark("point");
bar.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
bar.encode("x", "Horsepower").type("quantitative");
bar.encode("y", "Miles_per_Gallon").type("quantitative");
bar.encode("color", "Origin").type("nominal");
bar.encode("shape", "Origin").type("nominal");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_17">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val scatter = VegaLite("https://vega.github.io/vega-lite/examples/data/cars.json").
  mark("point").
  x(field = "Horsepower", `type` = "quantitative").
  y(field = "Miles_per_Gallon", `type` = "quantitative").
  color(field = "Origin", `type` = "nominal").
  shape(field = "Origin", `type` = "nominal")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_17"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A scatterplot showing horsepower and miles per gallons.",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {"field": "Origin", "type": "nominal"},
    "shape": {"field": "Origin", "type": "nominal"}
  }
};
      vegaEmbed('#vis_17', spec);
    </script>

    <h3 id="bubble_plot" class="title">Bubble Plot</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_18" data-toggle="tab">Java</a></li>
        <li><a href="#scala_18" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_18">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Bubble Plot");
bar.mark("point");
bar.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
bar.encode("x", "Horsepower").type("quantitative");
bar.encode("y", "Miles_per_Gallon").type("quantitative");
bar.encode("size", "Acceleration").type("quantitative");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_18">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val bubble = VegaLite("https://vega.github.io/vega-lite/examples/data/cars.json").
  mark("point").
  x(field = "Horsepower", `type` = "quantitative").
  y(field = "Miles_per_Gallon", `type` = "quantitative").
  size(field = "Acceleration", `type` = "quantitative")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_18"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bubbleplot showing horsepower on x, miles per gallons on y, and binned acceleration on size.",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "size": {"field": "Acceleration", "type": "quantitative"}
  }
};
      vegaEmbed('#vis_18', spec);
    </script>

    <h3 id="natural_disasters" class="title">Natural Disasters</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_19" data-toggle="tab">Java</a></li>
        <li><a href="#scala_19" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_19">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Natural Disasters").width(600).height(400);
bar.mark("circle").opacity(0.8).stroke("black").strokeWidth(1);
bar.data().url("https://vega.github.io/vega-lite/examples/data/disasters.csv");
bar.transform().filter("datum.Entity !== 'All natural disasters'");
bar.encode("x", "Year").type("ordinal").axis().labelOverlap("greedy");
bar.encode("y", "Entity").type("nominal").title(null);
bar.encode("color", "Entity").type("nominal").removeLegend();
bar.encode("size", "Deaths").type("quantitative")
        .range(0, 5000)
        .legend().title("Annual Global Deaths").clipHeight(30);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_19">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val disaster = VegaLite("https://vega.github.io/vega-lite/examples/data/disasters.csv").
  mark(JsObject(
    "type" -> "circle",
    "opacity" -> 0.8,
    "stroke" -> "black",
    "strokeWidth" -> 1
  )).
  width(600).
  height(400).
  x(field = "Year", `type` = "ordinal", axis = json"""{"labelAngle": 0}""").
  y(field = "Entity", `type` = "nominal", title = null).
  size(field = "Deaths", `type` = "quantitative",
      legend = json"""{"title": "Annual Global Deaths", "clipHeight": 30}""",
      scale = json"""{"range": [0, 5000]}"""
  ).
  color(field = "Entity", `type` = "nominal", legend = JsNull).
  transform(json"""{"filter": "datum.Entity !== 'All natural disasters'"}""")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_19"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://vega.github.io/vega-lite/examples/data/disasters.csv"
  },
  "width": 600,
  "height": 400,
  "transform": [
    {"filter": "datum.Entity !== 'All natural disasters'"}
  ],
  "mark": {
    "type": "circle",
    "opacity": 0.8,
    "stroke": "black",
    "strokeWidth": 1
  },
  "encoding": {
    "x": {
      "field": "Year",
      "type": "ordinal",
      "axis": {"labelAngle": 0}
    },
    "y": {"field": "Entity", "type": "nominal", "axis": {"title": ""}},
    "size": {
      "field": "Deaths",
      "type": "quantitative",
      "legend": {"title": "Annual Global Deaths", "clipHeight": 30},
      "scale": {"range": [0, 5000]}
    },
    "color": {"field": "Entity", "type": "nominal", "legend": null}
  }
};
      vegaEmbed('#vis_19', spec);
    </script>

    <h3 id="text_plot" class="title">Text Plot</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_20" data-toggle="tab">Java</a></li>
        <li><a href="#scala_20" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_20">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var bar = new View("Text Plot");
bar.mark("text");
bar.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
bar.transform().calculate("split(datum.Name, ' ')[0]", "Brand");
bar.encode("x", "Horsepower").type("quantitative");
bar.encode("y", "Miles_per_Gallon").type("quantitative");
bar.encode("color", "Brand").type("nominal");
bar.encode("text", "Brand").type("nominal");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_20">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val textPlot = VegaLite("https://vega.github.io/vega-lite/examples/data/cars.json").
  mark("text").
  x(field = "Horsepower", `type` = "quantitative").
  y(field = "Miles_per_Gallon", `type` = "quantitative").
  color(field = "Brand", `type` = "nominal").
  text(field = "Brand", `type` = "nominal").
  transform(json"""
    {
      "calculate": "split(datum.Name, ' ')[0]",
      "as": "Brand"
    }"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_20"></div>
    <script type="text/javascript">
      var spec = {
  "transform": [{
    "as": "Brand",
    "calculate": "split(datum.Name, ' ')[0]"
  }],
  "data": {
    "url": "https://vega.github.io/vega-lite/examples/data/cars.json"
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "encoding": {
    "color": {
      "field": "Brand",
      "type": "nominal"
    },
    "x": {
      "field": "Horsepower",
      "type": "quantitative"
    },
    "y": {
      "field": "Miles_per_Gallon",
      "type": "quantitative"
    },
    "text": {
      "field": "Brand",
      "type": "nominal"
    }
  },
  "config": {
    "view": {
      "continuousWidth": 400,
      "continuousHeight": 400
    }
  },
  "mark": "text"
};
      vegaEmbed('#vis_20', spec);
    </script>

    <h2 id="line_area_charts" class="title">Line & Area Charts</h2>

    <h3 id="line_chart" class="title">Line Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_21" data-toggle="tab">Java</a></li>
        <li><a href="#scala_21" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_21">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var line = new View("Line Chart");
line.mark("line");
line.data().url("https://vega.github.io/vega-lite/examples/data/stocks.csv");
line.transform().filter("datum.symbol==='GOOG'");
line.encode("x", "date").type("temporal");
line.encode("y", "price").type("quantitative");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_21">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val line = VegaLite("https://vega.github.io/vega-lite/examples/data/stocks.csv").
  mark("line").
  x(field = "date", `type` = "temporal").
  y(field = "price", `type` = "quantitative").
  transform(json"""{"filter": "datum.symbol==='GOOG'"}""")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_21"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
};
      vegaEmbed('#vis_21', spec);
    </script>

    <h3 id="line_point_chart" class="title">Line Chart with Point Markers</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_22" data-toggle="tab">Java</a></li>
        <li><a href="#scala_22" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_22">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var line = new View("Line Chart with Point Mark");
line.mark("line").point(true);
line.data().url("https://vega.github.io/vega-lite/examples/data/stocks.csv");
line.encode("x", "date").type("temporal").timeUnit("year");
line.encode("y", "price").type("quantitative").aggregate("mean");
line.encode("color", "symbol").type("nominal");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_22">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val pointLine = VegaLite("https://vega.github.io/vega-lite/examples/data/stocks.csv").
  mark(JsObject("type" -> "line", "point" -> true)).
  x(field = "date", `type` = "temporal", timeUnit = "year").
  y(field = "price", `type` = "quantitative", aggregate = "mean").
  color(field = "symbol", `type` = "nominal")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_22"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/stocks.csv"},
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {"timeUnit": "year", "field": "date", "type": "temporal"},
    "y": {"aggregate":"mean", "field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  }
};
      vegaEmbed('#vis_22', spec);
    </script>

    <h3 id="confidence_interval" class="title">Line Chart with Confidence Interval Band</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_23" data-toggle="tab">Java</a></li>
        <li><a href="#scala_23" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_23">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var line = new View();
line.mark("line");
line.encode("x", "Year").type("temporal").timeUnit("year");
line.encode("y", "Miles_per_Gallon").type("quantitative").aggregate("mean");

var band = new View();
band.mark("errorband").extent("ci");
band.encode("x", "Year").type("temporal").timeUnit("year");
band.encode("y", "Miles_per_Gallon").type("quantitative").title("Mean of Miles per Gallon (95% CIs)");

var layer = new Layer(line, band).title("Line Chart with Confidence Interval Band");
layer.data().url("https://vega.github.io/vega-lite/examples/data/cars.json");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_23">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val confidenceInterval = VegaLite.layer(
    "https://vega.github.io/vega-lite/examples/data/cars.json",
    "json",
    VegaLite.view().
      mark(JsObject("type" -> "errorband", "extent" -> "ci")).
      y(field = "Miles_per_Gallon", `type` = "quantitative", title = "Mean of Miles per Gallon (95% CIs)"),
    VegaLite.view().
      mark("line").
      y(field = "Miles_per_Gallon", `type` = "quantitative", aggregate = "mean")
  ).x(field = "Year", `type` = "temporal", timeUnit = "year")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_23"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/cars.json"},
  "encoding": {
    "x": {
      "field": "Year",
      "type": "temporal",
      "timeUnit": "year"
    }
  },
  "layer": [
    {
      "mark": {"type": "errorband", "extent": "ci"},
      "encoding": {
        "y": {
          "field": "Miles_per_Gallon",
          "type": "quantitative",
          "title": "Mean of Miles per Gallon (95% CIs)"
        }
      }
    },
    {
      "mark": "line",
      "encoding": {
        "y": {
          "aggregate": "mean",
          "field": "Miles_per_Gallon",
          "type": "quantitative"
        }
      }
    }
  ]
};
      vegaEmbed('#vis_23', spec);
    </script>

    <h3 id="rolling_averages" class="title">Rolling Averages over Raw Values</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_24" data-toggle="tab">Java</a></li>
        <li><a href="#scala_24" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_24">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var line = new View();
line.mark("line").color("red").size(3);
line.encode("x", "date").type("temporal");
line.encode("y", "rolling_mean").type("quantitative");

var point = new View();
point.mark("point").opacity(0.3);
point.encode("x", "date").type("temporal").title("Date");
point.encode("y", "temp_max").type("quantitative").title("Max Temperature");

var layer = new Layer(line, point).title("Rolling Averages over Raw Values").width(400).height(300);
layer.data().format("csv").url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv");
layer.transform().window(new WindowTransformField("mean", "temp_max", 0, "rolling_mean")).frame(-15, 15);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_24">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val rollingAverages = VegaLite.layer(
    "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv",
    "csv",
    VegaLite.view().
      mark(JsObject("type" -> "point", "opacity" -> 0.3)).
      x(field = "date", `type` = "temporal", title = "Date").
      y(field = "temp_max", `type` = "quantitative", title = "Max Temperature"),
    VegaLite.view().
      mark(JsObject("color" -> "red", "size" -> 3, "type" -> "line")).
      x(field = "date", `type` = "temporal").
      y(field = "rolling_mean", `type` = "quantitative"),
  ).
  width(400).
  height(300).
  transform(json"""
    {
      "frame": [-15, 15],
      "window": [
        {
          "field": "temp_max",
          "op": "mean",
          "as": "rolling_mean"
        }
      ]
    }"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_24"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Plot showing a 30 day rolling average with raw values in the background.",
  "width": 400,
  "height": 300,
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"},
  "transform": [{
      "frame": [-15, 15],
      "window": [
        {
          "field": "temp_max",
          "op": "mean",
          "as": "rolling_mean"
        }
      ]
    }
  ],
  "layer": [
    {
      "mark": {"type": "point", "opacity": 0.3},
      "encoding": {
        "x": {
          "title": "Date",
          "field": "date",
          "type": "temporal"
        },
        "y": {
          "title": "Max Temperature",
          "field": "temp_max",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "color": "red",
        "size": 3,
        "type": "line"
      },
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal"
        },
        "y": {
          "field": "rolling_mean",
          "type": "quantitative"
        }
      }
    }
  ]
};
      vegaEmbed('#vis_24', spec);
    </script>

    <h3 id="area_chart" class="title">Area Chart with Overlaying Lines and Point Markers</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_25" data-toggle="tab">Java</a></li>
        <li><a href="#scala_25" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_25">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var area = new View("Area Chart with Overlaying Lines and Point Markers");
area.data().url("https://vega.github.io/vega-lite/examples/data/stocks.csv");
area.transform().filter("datum.symbol==='GOOG'");
area.mark("area").line(true).point(true);
area.encode("x", "date").type("temporal");
area.encode("y", "price").type("quantitative");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_25">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val area = VegaLite("https://vega.github.io/vega-lite/examples/data/stocks.csv").
  mark(JsObject("type" -> "area", "line" -> true, "point" -> true)).
  x(field = "date", `type` = "temporal").
  y(field = "price", `type` = "quantitative").
  transform(json"""{"filter": "datum.symbol==='GOOG'"}""")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_25"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "mark": {"type": "area", "line": true, "point": true},
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
};
      vegaEmbed('#vis_25', spec);
    </script>

    <h2 id="advanced_charts" class="title">Advanced Charts</h2>

    <h3 id="weather_heatmap" class="title">Annual Weather Heatmap</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_26" data-toggle="tab">Java</a></li>
        <li><a href="#scala_26" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_26">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var heatmap = new View("2010 Daily Max Temperature (F) in Seattle, WA");

heatmap.mark("rect");
heatmap.data().url("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv");
heatmap.encode("x", "date").type("ordinal").timeUnit("date").title("Day").axis().labelAngle(0).format("%e");
heatmap.encode("y", "date").type("ordinal").timeUnit("month");
heatmap.encode("color", "temp_max").type("quantitative").aggregate("max").legend().title(null);

heatmap.config().axis().domain(false);
heatmap.viewConfig().strokeWidth(0).step(13);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_26">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val heatmap = VegaLite("https://vega.github.io/vega-lite/examples/data/seattle-weather.csv").
  mark("rect").
  x(field = "date", `type` = "ordinal", timeUnit = "date", title = "Day", axis = json"""{"labelAngle": 0, "format": "%e"}""").
  y(field = "date", `type` = "ordinal", timeUnit = "month", title = "Month").
  color(field = "temp_max", `type` = "quantitative", aggregate = "max", legend = json"""{"title": null}""").
  config(json"""
    {
      "view": {
          "strokeWidth": 0,
          "step": 13
      },
      "axis": {
          "domain": false
      }
    }"""
  ).
  title("2010 Daily Max Temperature (F) in Seattle, WA")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_26"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
      "url": "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"
  },
  "title": "2010 Daily Max Temperature (F) in Seattle, WA",
  "config": {
      "view": {
          "strokeWidth": 0,
          "step": 13
      },
      "axis": {
          "domain": false
      }
  },
  "mark": "rect",
  "encoding": {
      "x": {
          "field": "date",
          "timeUnit": "date",
          "type": "ordinal",
          "title": "Day",
          "axis": {
              "labelAngle": 0,
              "format": "%e"
          }
      },
      "y": {
          "field": "date",
          "timeUnit": "month",
          "type": "ordinal",
          "title": "Month"
      },
      "color": {
          "field": "temp_max",
          "aggregate": "max",
          "type": "quantitative",
          "legend": {
              "title": null
          }
      }
  }
}
;
      vegaEmbed('#vis_26', spec);
    </script>

    <h3 id="donut_chart" class="title">Donut Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_27" data-toggle="tab">Java</a></li>
        <li><a href="#scala_27" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_27">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var donut = new View("Donut Chart");
donut.data().values("""
        [
          {"category": 1, "value": 4},
          {"category": 2, "value": 6},
          {"category": 3, "value": 10},
          {"category": 4, "value": 3},
          {"category": 5, "value": 7},
          {"category": 6, "value": 8}
        ]""");

donut.mark("arc").innerRadius(50);
donut.encode("theta", "value").type("quantitative");
donut.encode("color", "category").type("nominal");
donut.viewConfig().stroke(null);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_27">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val donut = VegaLite(jsan"""
    [
      {"category": 1, "value": 4},
      {"category": 2, "value": 6},
      {"category": 3, "value": 10},
      {"category": 4, "value": 3},
      {"category": 5, "value": 7},
      {"category": 6, "value": 8}
    ]"""
  ).
  mark(JsObject("type" -> "arc", "innerRadius" -> 50)).
  view(JsObject("stroke" -> JsNull)).
  theta(field = "value", `type` = "quantitative").
  color(field = "category", `type` = "nominal")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_28"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple donut chart with embedded data.",
  "data": {
    "values": [
      {"category": 1, "value": 4},
      {"category": 2, "value": 6},
      {"category": 3, "value": 10},
      {"category": 4, "value": 3},
      {"category": 5, "value": 7},
      {"category": 6, "value": 8}
    ]
  },
  "mark": {"type": "arc", "innerRadius": 50},
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  },
  "view": {"stroke": null}
};
      vegaEmbed('#vis_28', spec);
    </script>

    <h3 id="radial_chart" class="title">Radial Chart</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_28" data-toggle="tab">Java</a></li>
        <li><a href="#scala_28" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_28">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var arc = new View();
arc.mark("arc").innerRadius(20).stroke("#fff");

var text = new View();
text.mark("text").radiusOffset(10);
text.encode("text", "data").type("quantitative");

var layer = new Layer(arc, text).title("Radial Chart");
layer.background().stroke(null);
layer.data().values("[12, 23, 47, 6, 52, 19]");
layer.encode("theta", "data").type("quantitative").stack("zero");
layer.encode("radius", "data").type("quantitative").scale("sqrt").zero(true).range(20, 100);
layer.encode("color", "data").type("nominal").removeLegend();
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_28">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val radial = VegaLite.layer(
    jsan"""[12, 23, 47, 6, 52, 19]""",
    VegaLite.view().
      mark(JsObject("type" -> "arc", "innerRadius" -> 20, "stroke" -> "#fff")),

    VegaLite.view().mark(JsObject("type" -> "text", "radiusOffset" -> 10)).
      text(field = "data", `type` = "quantitative")
  ).
  mark(JsObject("type" -> "arc", "innerRadius" -> 50)).
  view(JsObject("stroke" -> JsNull)).
  theta(field = "data", `type` = "quantitative", stack = true).
  radius(field = "data", `type` = "quantitative", scale = json"""{"type": "sqrt", "zero": true, "range": [20, 100]}""").
  color(field = "data", `type` = "nominal", legend = JsNull)
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_27"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple radial chart with embedded data.",
  "data": {
    "values": [12, 23, 47, 6, 52, 19]
  },
  "layer": [{
    "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"}
  },{
    "mark": {"type": "text", "radiusOffset": 10},
    "encoding": {
      "text": {"field": "data", "type": "quantitative"}
    }
  }],
  "encoding": {
    "theta": {"field": "data", "type": "quantitative", "stack": true},
    "radius": {"field": "data", "type": "quantitative", "scale": {"type": "sqrt", "zero": true, "range": [20, 100]}},
    "color": {"field": "data", "type": "nominal", "legend": null}
  },
  "view": {"stroke": null}
};
      vegaEmbed('#vis_27', spec);
    </script>

    <h3 id="boxplot" class="title">Box Plot</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_29" data-toggle="tab">Java</a></li>
        <li><a href="#scala_29" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_29">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var boxplot = new View("Box Plot");
boxplot.background().stroke(null);
boxplot.mark("boxplot").extent("min-max");
boxplot.viewConfig().stroke(null);
boxplot.data().url("https://vega.github.io/vega-lite/examples/data/population.json");
boxplot.encode("x", "age").type("ordinal");
boxplot.encode("y", "people").type("quantitative").title("population");
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_29">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val boxplot = VegaLite("https://vega.github.io/vega-lite/examples/data/population.json").
  mark(JsObject("type" -> "boxplot", "extent" -> "min-max")).
  view(JsObject("stroke" -> JsNull)).
  x(field = "age", `type` = "ordinal").
  y(field = "people", `type` = "quantitative", title = "population")
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_29"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A vertical 2D box plot showing median, min, and max in the US population distribution of age groups in 2000.",
  "data": {"url": "https://vega.github.io/vega-lite/examples/data/population.json"},
  "mark": {
    "type": "boxplot",
    "extent": "min-max"
  },
  "encoding": {
    "x": {"field": "age", "type": "ordinal"},
    "y": {
      "field": "people",
      "type": "quantitative",
      "axis": {"title": "population"}
    }
  }
};
      vegaEmbed('#vis_29', spec);
    </script>

    <h3 id="vertical_concatenation" class="title">Vertical Concatenation</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_30" data-toggle="tab">Java</a></li>
        <li><a href="#scala_30" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_30">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
Concat.vconcat(bar, aggregateBar, groupedBar).show()
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_30">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
show(VegaLite.vconcat(bar, aggregateBar, groupedBar))
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_30"></div>
    <script type="text/javascript">
      var spec = {
  "vconcat": [{
    "data": {
      "values": [{
        "a": "A",
        "b": 28
      }, {
        "a": "B",
        "b": 55
      }, {
        "a": "C",
        "b": 43
      }, {
        "a": "D",
        "b": 91
      }, {
        "a": "E",
        "b": 81
      }, {
        "a": "F",
        "b": 53
      }, {
        "a": "G",
        "b": 19
      }, {
        "a": "H",
        "b": 87
      }, {
        "a": "I",
        "b": 52
      }]
    },
    "description": "A simple bar chart with embedded data.",
    "encoding": {
      "x": {
        "field": "a",
        "axis": {
          "labelAngel": 0
        },
        "type": "ordinal"
      },
      "y": {
        "field": "b",
        "type": "quantitative"
      }
    },
    "mark": "bar",
    "height": {
      "step": 17
    }
  }, {
    "transform": [{
      "filter": "datum.year == 2000"
    }],
    "data": {
      "url": "https://vega.github.io/vega-lite/examples/data/population.json"
    },
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "description": "A bar chart showing the US population distribution of age groups in 2000.",
    "encoding": {
      "x": {
        "field": "people",
        "type": "quantitative",
        "title": "population",
        "aggregate": "sum"
      },
      "y": {
        "field": "age",
        "type": "ordinal"
      }
    },
    "config": {
      "view": {
        "continuousWidth": 400,
        "continuousHeight": 400
      }
    },
    "mark": "bar",
    "height": {
      "step": 17
    }
  }, {
    "transform": [{
      "filter": "datum.year == 2000"
    }, {
      "as": "gender",
      "calculate": "datum.sex == 2 ? 'Female' : 'Male'"
    }],
    "data": {
      "url": "https://vega.github.io/vega-lite/examples/data/population.json"
    },
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "width": {
      "step": 12
    },
    "encoding": {
      "color": {
        "field": "gender",
        "scale": {
          "range": ["#675193", "#ca8861"]
        },
        "type": "nominal"
      },
      "column": {
        "spacing": 10,
        "field": "age",
        "center": false,
        "type": "ordinal",
        "align": "all"
      },
      "x": {
        "field": "gender",
        "type": "nominal",
        "title": null
      },
      "y": {
        "field": "people",
        "axis": {
          "grid": false,
          "title": "population"
        },
        "type": "quantitative",
        "aggregate": "sum"
      }
    },
    "config": {
      "view": {
        "stroke": "transparent"
      },
      "axis": {
        "domainWidth": 1
      }
    },
    "mark": "bar"
  }],
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {
    "view": {
      "continuousWidth": 400,
      "continuousHeight": 400
    }
  }
};
      vegaEmbed('#vis_30', spec);
    </script>

    <h3 id="SPLOM" class="title">Scatterplot Matrix (SPLOM)</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_31" data-toggle="tab">Java</a></li>
        <li><a href="#scala_31" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_31">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var plot = new View().width(150).height(150);
plot.mark("point");
plot.encode("x", "repeat:column").type("quantitative").zero(false);
plot.encode("y", "repeat:row").type("quantitative").zero(false);
plot.encode("color", "species").type("nominal");

String[] row = {"petalWidth", "petalLength", "sepalWidth", "sepalLength"};
String[] column = {"sepalLength", "sepalWidth", "petalLength", "petalWidth"};
var splom = new Repeat(plot, row, column).title("Scatter Plot Matrix");
splom.data().url("https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json");
splom.show();
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_31">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val iris = read.arff("data/weka/iris.arff")
show(VegaLite.splom(iris, "class"))
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_31"></div>
    <script type="text/javascript">
      var spec = {
  "data": {"url": "https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json"},
  "repeat": {
    "row": ["petalWidth", "petalLength", "sepalWidth", "sepalLength"],
    "column": ["sepalLength", "sepalWidth", "petalLength", "petalWidth"]
  },
  "spec": {

    "width": 150,
    "height": 150,
    "mark": "point",
    "encoding": {
      "x": {
        "field": {"repeat": "column"},
        "type": "quantitative",
        "scale": {"zero": false}
      },
      "y": {
        "field": {"repeat": "row"},
        "type": "quantitative",
        "scale": {"zero": false}
      },
      "color": {"field": "species", "type": "nominal"}
    }
  }
};
      vegaEmbed('#vis_31', spec);
    </script>

    <h3 id="geo_choropleth" class="title">Choropleth of Unemployment Rate per County</h3>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#java_32" data-toggle="tab">Java</a></li>
        <li><a href="#scala_32" data-toggle="tab">Scala</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="java_32">
            <div class="code" style="text-align: left;">
            <pre class="prettyprint lang-java"><code>
var geo = new View("Choropleth of Unemployment Rate per County").width(500).height(300);
geo.mark("geoshape").extent("min-max");
geo.data().topojson("https://vega.github.io/vega-lite/examples/data/us-10m.json", "feature", "counties");
geo.encode("color", "rate").type("quantitative");
geo.projection("albersUsa");

var transform = geo.transform();
var lookupData = transform.lookupData("id").fields("rate");
lookupData.data().url("https://vega.github.io/vega-lite/examples/data/unemployment.tsv");
geo.transform().lookup("id", lookupData);
            </code></pre>
            </div>
        </div>
        <div class="tab-pane" id="scala_32">
            <div class="code" style="text-align: left;">
    <pre class="prettyprint lang-scala"><code>
val geo = VegaLite(
    "https://vega.github.io/vega-lite/examples/data/us-10m.json",
    JsObject("type" -> "topojson", "feature" -> "counties")
  ).
  mark("geoshape").
  color(field = "rate", `type` = "quantitative").
  projection(json"""{"type": "albersUsa"}""").
  width(500).
  height(300).
  transform(json"""
    {
      "lookup": "id",
      "from": {
        "data": {
          "url": "https://vega.github.io/vega-lite/examples/data/unemployment.tsv"
        },
        "key": "id",
        "fields": ["rate"]
      }
    }"""
  )
    </code></pre>
            </div>
        </div>
    </div>

    <div id="vis_32"></div>
    <script type="text/javascript">
      var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "height": 300,
  "data": {
    "url": "https://vega.github.io/vega-lite/examples/data/us-10m.json",
    "format": {
      "type": "topojson",
      "feature": "counties"
    }
  },
  "transform": [{
    "lookup": "id",
    "from": {
      "data": {
        "url": "https://vega.github.io/vega-lite/examples/data/unemployment.tsv"
      },
      "key": "id",
      "fields": ["rate"]
    }
  }],
  "projection": {
    "type": "albersUsa"
  },
  "mark": "geoshape",
  "encoding": {
    "color": {
      "field": "rate",
      "type": "quantitative"
    }
  }
};
      vegaEmbed('#vis_32', spec);
    </script>

    <div id="btnv">
        <span class="btn-arrow-left">&larr; &nbsp;</span>
        <a class="btn-prev-text" href="visualization.html" title="Previous Section: Visualization"><span>Visualization</span></a>
        <a class="btn-next-text" href="classification.html" title="Next Section: Classification"><span>Classification</span></a>
        <span class="btn-arrow-right">&nbsp;&rarr;</span>
    </div>
</div>

<script type="text/javascript">
    $('#toc').toc({exclude: 'h1, h5, h6', context: '', autoId: true, numerate: false});
</script>
